<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Windows7 Desktop UI using pure css3 and jquery UI</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id="wrapper">

  <div class="calc drag">
    <div class="head">
  <p>Calculator</p>
    <div class="wcmd">
          <a class="min">-</a>
          <a class="max">□</a>
          <a class="close">✖</a>
        </div>
      </div>
  <div class="calc-in">
  <form id="calcform">
    <input id="display" type="text" value="0" disabled="1">
    <div class="num-wrap">
    <button id="n7" value="7">7</button>
    <button id="n8" value="8">8</button>
    <button id="n9" value="9">9</button>
    <button id="ndiv" value="/">/</button>
    <button id="nmod" value="%">%</button>
    <button id="n4" value="4">4</button>
    <button id="n5" value="5">5</button>
    <button id="n6" value="6">6</button>
    <button id="nmul" value="*">*</button>
    <button id="nC" value="c">C</button>
    <button id="n1" value="1">1</button>
    <button id="n2" value="2">2</button>
    <button id="n3" value="3">3</button>
    <button id="nsub" value="-">-</button>
    <button id="neq" value="=">=</button>
    <button id="n0" value="0">0</button>
    <button id="nP" value=".">.</button>
    <button id="nadd" value="+">+</button>
    </div>
  </form>
</div>
</div>


<div class="window drag" class="ui-widget-content">
  <div class="head">
            <div class="wcmd">
          <a class="min">-</a>
          <a class="max">□</a>
          <a class="close">✖</a>
        </div>
  </div>
        
        
        <div class="wnav">
          <div class="arrow-wrap">
            <div class="back">➜</div>
            <div class="next">➜</div>
            <div class="ltry">▼</div>

          </div>
          <div class="address">
            <div class="mycomicon"><img src="css/img/myc.png"></div>
            <div class="rtry">►</div>
            <div class="ctext">
            Computer</div>
            <div class="rtry">►</div>
            <div class="ref"><img src="css/img/ref.png"></div>
          </div>
          <input type="text" class="search" placeholder="Search Computer">
        </div>
                <div class="c"></div>
        <div class="con-wrap">
          <div class="side">
            <ul>
              <li class="fav">Favorites
                <ul>
                  <li class="desk">Desktop</li>
                  <li class="down">Downloads</li>
                  <li class="rece">Recent Places</li>
                </ul>
              </li>
              <li class="lib">Libraries
                <ul>
                  <li class="docu">Documents</li>
                  <li class="musi">Music</li>
                  <li class="pict">Pictures</li>
                  <li class="vide">Videos</li>
                </ul>
              </li>
              <li class="homeg">Homegroup</li>
              <li class="com">Computer
                  <ul>
                  <li class="wind">Local Disk(C:)</li>
                  <li class="driv">Local Disk(D:)</li>
                  <li class="driv">Local Disk(E:)</li>
                  <li class="driv">Local Disk(F:)</li>
                </ul>
              </li>
              <li class="net">Network</li>
            </ul>
          </div>
          <div class="cont">
            <p>Hard Disk Drives(4)<span></span></p>
            <div class="disk-box win-disk-box">
              <label>Local Disk(C:)</label>
              <div class="bar">
                <div class="bar-fill"></div>
              </div>
              <span class="info">35 GB free of 97 GB</span>
            </div>
            <div class="disk-box">
              <label>Local Disk(D:)</label>
              <div class="bar">
                <div class="bar-fill" style="width:45%;"></div>
              </div>
              <span class="info">135 GB free of 300 GB</span>
            </div>
            <div class="disk-box">
              <label>Local Disk(E:)</label>
              <div class="bar">
                <div class="bar-fill" style="width:41%;"></div>
              </div>
              <span class="info">125 GB free of 300 GB</span>
            </div>
            <div class="disk-box">
              <label>Local Disk(F:)</label>
              <div class="bar">
                <div class="bar-fill" style="width:66%;"></div>
              </div>
              <span class="info">200 GB free of 300 GB</span>
            </div>
            <div class="c"></div>
            <p>Device with removable storage(1)<span style="width: 62%;"></span></p>
            <div class="disk-box dvd">
              <br>
              <label>DVD RW Drive(G:)</label>
            </div>
          </div>
          <div class="c"></div>
          <div class="foot">
            <img src="css/img/myc52.png">
            <b>ERWIN-PC</b>
            <label><i>Workdgroup:</i>RATRA</label>
            <label><i>Memory:</i>6.00 GB</label><br>
            <label style="margin-left: 87px;"><i>Processor:</i>AMD A8-4500M APU With..</label>

          </div>
        </div>

          </div>


<div id="startmenu">
	<ul id="applications">
	<li>
    <a href="#"><img src="css/img/chrome.png" alt="" />Google Chrome</a></li>
  <li><a href="#"><img src="css/img/notepad.jpg" alt="" />Notepad</a></li>
	<li><a href="#"><img src="css/img/firefox-32.png" alt="" />Mozilla Firefox</a></li>
  <li><a href="#"><img src="css/img/ie.png" alt="" />Internet Explorer</a></li>
  <li><a href="#"><img src="css/img/vs2010.jpg" alt="" />Microsoft Visual Studio 2010</a></li>
  <li><a href="#"><img src="css/img/paint.jpg" alt="" />Paint</a></li>
		<li class="search">
			<form action="">
			<input type="text" placeholder="Search programs and files">
			</form>
	    </li>
	</ul>
	<ul id="sysdir">
        <li class="user"><div class="frame">
          <div class="frame-inner">
          </div>
        </div>
      </li>
        <li><a href="#"><span>Documents</span></a></li>
        <li><a href="#"><span>Pictures</span></a></li>
        <li><a href="#"><span>Music</span></a></li>
        <li><a href="#"><span>Computer</span></a></li>
        <li><a href="#"><span>Network</span></a></li>
        <li><a href="#"><span>Connect to</span></a></li>
    </ul>
</div>
<div id="bottom">
	<div class="start"></div>
  <div class="taskbar">
    <ul>
      <li id="t-explor"><img src="css/img/tb-explorer.png"></li>
      <li id="t-calc"><img src="css/img/Calc.png"></li>
    </ul>
  </div>
  <div class="datetime">
  </div>
</div>
</div>
   
</body>
</html>